<template>
  <a-card title="消息详情">
    <a-form-model
      ref="messageForm"
      :rules="messageRules"
      :model="messageForm"
    >
      <a-form-model-item label="消息类型" prop="msg_type">
        <a-select v-model="messageForm.msg_type">
          <a-select-option value="60">内部公告</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="消息标题" prop="title">
        <a-input type="text" v-model="messageForm.title" />
      </a-form-model-item>
      <a-form-model-item label="消息内容" prop="content">
        <quill-editor :value="messageForm.content" @change="onChange"></quill-editor>
      </a-form-model-item>
      <a-form-model-item label="消息署名" prop="author">
        <a-input type="text" v-model="messageForm.author" />
      </a-form-model-item>
      <a-form-model-item label="附件">
        <a-upload
          name="file"
          :action="uploadUrl"
          :headers="headers"
          @change="onChangeUpload"
        >
          <a-button> <a-icon type="upload" /> 上传附件 </a-button>
        </a-upload>
      </a-form-model-item>
      <a-divider />
      <a-form-model-item style="text-align: right">
        <a-button type="primary" style="margin-right:5px" @click="confirmSend">确认发布</a-button>
        <a-button type="default">重置表单</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import QuillEditor from '@/components/Editor/QuillEditor'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import apis from '@/api'
import { getAddMsg, postAddMsg } from '@/api/message'

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  components: {
    QuillEditor
  },
  name: 'MessageDetail',
  data () {
    return {
      messageForm: {},
      messageRules: {
        msg_type: [{ required: true, message: '必须选择消息类型', trigger: 'blur' }],
        title: [{ required: true, message: '必须填写消息标题', trigger: 'blur' }],
        content: [{ required: true, message: '消息内容不能为空', trigger: 'blur' }],
        company: [{ required: true, message: '必须选择发布公司', trigger: 'change' }],
        author: [{ required: true, message: '必须填写消息署名', trigger: 'blur' }]
      },
      msgTypeOpts: {},
      headers: { 'Access-Token': storage.get(ACCESS_TOKEN) },
      uploadUrl: apis.Upload,
      loading: true,
      company: []
    }
  },
  created () {
    this.getAdd()
  },
  methods: {
    onChange (html) {
      this.messageForm.content = html
    },
    onChangeUpload (info) {
      if (info.file.status === 'done') {
        this.messageForm.file = info.file.response.result.url
        this.messageForm.filename = info.file.name
      }
    },
    getAdd () {
      getAddMsg().then(res => {
        this.msgTypeOpts = res.result.msg_type
      })
    },
    reset () {
      this.messageForm = {}
    },
    confirmSend () {
      const app = this
      const data = {}
      app.$refs.messageForm.validate(valid => {
        if (valid) {
          app.$confirm({
            title: '确认发布此消息吗',
            onOk: () => {
              for (const k in app.messageForm) {
                data['msg[' + k + ']'] = app.messageForm[k]
              }
              postAddMsg(data).then(res => {
                if (res.status === 0) {
                  app.$message.success('发布成功')
                  app.$router.push({ name: 'AllMessage' })
                } else {
                  app.$warning({
                    title: res.msg
                  })
                }
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
